<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="基本信息">
				<view slot="center" class="navTitle">
					基本信息
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="whiteForm">
						<view class="line s2" style="position: relative;">


							<button type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar"
								style="font-size: 30rpx;position: absolute;top:0;bottom: 0;left: 0;right: 0;opacity: 0;z-index: 1;">上传微信头像</button>
							<view class="ll">
								<view class="avan">
									<image :src="form.avatar" mode="aspectFill"></image>
								</view>
							</view>
							<view class="lr">
								<view class="fs">
									<text>修改头像</text>
									<view class="ico">
										<image src="@/static/images/icon-more.svg" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="whiteForm">
						<view class="line">
							<view class="ll">
								姓名
							</view>
							<view class="lr">
								{{form.name}}
							</view>
						</view>
						<view class="line" @click="showSex=true">
							<view class="ll">
								性别
							</view>
							<view class="lr">
								{{form.sex}}
							</view>
						</view>
						<view class="line">
							<view class="ll">
								生日
							</view>
							<view class="lr">

								<picker mode="date"  @change="bindDateChange">
									<view class="uni-input">{{form.birthday || '请选择'}}</view>
								</picker>

							</view>


						</view>
						<view class="line">
							<view class="ll">
								手机号
							</view>
							<view class="lr">
								<input type="text" disabled placeholder="请输入" v-model="form.mobile" />
							</view>
						</view>
						<view class="line">
							<view class="ll">
								邮箱
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.email" />
							</view>
						</view>
						<view class="line">
							<view class="ll">
								工作单位
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.workUnit" />
							</view>
						</view>
						<view class="line">
							<view class="ll">
								工作地址
							</view>
							<view class="lr">
								<input type="text" placeholder="请输入" v-model="form.workAddress" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex0 fbtns">
			<view class="pd30">
				<view class="btn" @tap="toEdit">
					确认修改
				</view>
			</view>
		</view>
		<u-datetime-picker :show="showDate" mode="date"></u-datetime-picker>
		<u-picker :show="showSex" @confirm="confirmSex" :columns="columnsSex"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				showDate: false,
				showSex: false,
				columnsSex: [
					['男', '女']
				]
			}
		},
		methods: {
			bindDateChange(e) {
				this.form.birthday=e.detail.value
			},
			confirmSex(e) {
				this.form.sex = e.value[0]
				this.showSex = false
			},
			chooseavatar(e) {
				console.log(e);

				uni.uploadFile({
					url: this.$config.apiBaseUrl + "api/file/upload", //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					fileType: 'image',
					name: 'file',
					header: {

						'Accept': 'application/json',
						'Content-Type': 'application/x-www-form-urlencoded',
						'Authorization': this.$db.get("userToken")
					},
					formData: {
						'file': e.detail.avatarUrl,

					},
					success: (uploadFileRes) => {

						this.form.avatar = JSON.parse(uploadFileRes.data).data


					},
				});
			},
			toEdit() {
				let post = {
					name: this.form.name,
					logo: this.form.avatar,
					sex: this.form.sex,
					birthday:this.form.birthday,
					workAddress: this.form.workAddress,
					workUnit: this.form.workUnit
				}
				this.$api.userUpdate(post, res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功！',
							icon: 'none'
						});
						this.getInfo()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})

			},
			getInfo() {


				if (this.$db.get("userToken")) {
					this.$api.memberInfo({}, res => {
						if (res.code == 200) {
							this.form = res.data;
						}
					})

				}
			}
		},
		computed: {

		},
		onShow() {
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.whiteForm {
		padding: 0 40rpx;
		background: #fff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.textarea {
			border: none;
			background: #fff;
			font-size: 28rpx;
			color: #65554d;
			outline: none;
			line-height: 1.5;
			padding: 40rpx 0;
		}

		.line {
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			height: 100rpx;
			justify-content: space-between;
			border-bottom: 1rpx solid #f7f5f2;
			font-size: 28rpx;

			&.s2 {
				height: 140rpx;
			}

			&:last-child {
				border: none;
			}

			.ll {
				flex: 1 1 auto;
				overflow: hidden;
				padding-right: 30rpx;
				color: #897f7a;

				.avan {
					width: 90rpx;
					height: 90rpx;
					border: 5rpx solid #ffe3c2;
					box-sizing: border-box;
					background: #fff;
					overflow: hidden;
					border-radius: 50%;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}

			.lr {
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				color: #af9c91;

				.fs {
					display: flex;
					align-items: center;
				}

				input {
					display: block;
					outline: none;
					border: none;
					background: transparent;
					width: 100%;
					text-align: right;
					font-size: 28rpx;
					color: #65554d;
				}

				.ico {
					flex: 0 0 auto;
					margin-left: 10rpx;

					image {
						display: block;
						width: 12rpx;
						height: 24rpx;
					}
				}

				.cur {
					flex: 0 0 auto;
				}
			}
		}
	}
</style>